<template>
	<form class="form" @submit="sub">
		<!-- 头像上传 -->
		<view class="form-item">
			<view class="form-title form-img" @click="chooseImage">
				<view class="label">
					<text class="red">*</text>
					你的形象
				</view>
				<view class="image-item">
					<lazy-load-image class="avatar" :image="baseMsgData.defaultImg" :errorImg="config.errorImage.avator" imgMode="aspectFill" height="110rpx" borderRadius="55" />
					<icon class="iconfont icon">&#xe7d3;</icon>
				</view>
			</view>
			<view class="form-control form-none-control">
				<input class="input" type="text" v-model="baseMsgData.formData.avatar" name="avatar" placeholder="请上传形象图片" placeholder-class="placeholderStyle" />
			</view>
		</view>
		<view class="form-item">
			<view class="form-title">
				<view class="label">
					<text class="red">*</text>
					技能简述
				</view>
				<view class="value">{{ baseMsgData.formData.businessname.length }}/36</view>
			</view>
			<view class="form-control">
				<input
					class="input"
					type="text"
					maxlength="36"
					v-model="baseMsgData.formData.businessname"
					name="businessname"
					placeholder="如：写作定制、专业设计美化等"
					placeholder-class="placeholderStyle"
				/>
			</view>
		</view>
		<view class="form-item">
			<view class="form-title">
				<view class="label">
					<text class="red">*</text>
					能力描述
				</view>
				<view class="value">{{ baseMsgData.formData.introduce.length }}/240</view>
			</view>
			<view class="form-control">
				<textarea
					class="textarea"
					maxlength="240"
					v-model="baseMsgData.formData.introduce"
					name="introduce"
					placeholder="如：专注于文案的个性定制，修改，润色等，本人已有8年相关工作经验，具有扎实的文案功底，可承接演讲稿、读后感、任务计划书、营销方案等多方面的工作。欢迎大家咨询~"
					placeholder-class="placeholderStyle"
				></textarea>
			</view>
		</view>
		<view class="form-item">
			<view class="form-title">
				<view class="label">手机号</view>
				<view class="value">183 **** 2148</view>
			</view>
			<view class="form-title from-title-no-border">
				<view class="label">允许我的手机号对外展示</view>
				<view class="value"><switch checked @change="isShowMobile"></switch></view>
			</view>
			<view class="form-control form-none-control">
				<input class="input" type="text" v-model="baseMsgData.formData.isshowmobile" name="isshowmobile" placeholder-class="placeholderStyle" />
			</view>
		</view>
		<view class="form-item">
			<view class="form-title"><view class="label">微信号</view></view>
			<view class="form-control">
				<input
					class="input"
					type="text"
					maxlength="20"
					v-model="baseMsgData.formData.wechat"
					name="wechat"
					placeholder="请填写6-20位的真实可添加的微信号"
					placeholder-class="placeholderStyle"
				/>
			</view>
		</view>
		<view class="form-item">
			<view class="form-title">
				<view class="label">证书</view>
				<view class="value upload-value" @click="addCredentials">
					<text>点击上传</text>
					<icon class="iconfont icon">&#xe71e;</icon>
				</view>
			</view>
			<view class="form-control">
				<view class="image-list">
					<view class="item" v-for="(item, index) in baseMsgData.credentialsData" :key="index">
						<img class="image" :src="item" />
						<view class="delete-img" @click="deleteCredentials(index)"><icon class="iconfont icon">&#xe7b7;</icon></view>
					</view>
				</view>
			</view>
			<view class="form-control  form-none-control">
				<input class="input" type="text" maxlength="20" v-model="baseMsgData.formData.credentials" name="credentials" placeholder-class="placeholderStyle" />
			</view>
		</view>
		<view class="form-submit"><button class="btn btn-sub" form-type="submit" hover-class="btnClickStyle">下一步</button></view>
	</form>
</template>

<script setup>
import { ref, reactive, defineComponent } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { valid } from '@/subpages/common/utils/valid.js';
import { isEmpty } from '@/common/utils/index.js';
import { useStore } from 'vuex';
import { getBusinessInfo } from '@/subpages/common/api/set.js';
import { uploadImg } from '@/subpages/common/api/upload.js';
import { updateAvator, updateImInfos } from '@/subpages/common/api/customer/info.js';
import { showModal } from '@/common/hooks/useShow.js';
import config from '@/uni.config.js';
const store = useStore();
const emits = defineEmits(['baseMsgCallback']);
const baseMsgData = reactive({
	formData: {
		avatar: '', //头像
		businessname: '', //技能简述
		introduce: '', //简介
		isshowmobile: 1, //是否展示手机1展示2不展示',
		credentials: '', //证书
		wechat: '', //微信号
		credentials: '' //证明书
	},
	credentialsData: [],
	defaultImg: config.errorImage.avator
});

//头像上传
function chooseImage() {
	uni.chooseImage({
		count: 1,
		crop: {
			width: 600,
			height: 600
		},
		success(res) {
			const size = +res.tempFiles[0].size / 1024 / 1024;
			if (size > config.file.uploadSize) {
				showModal({
					content: `建议上传小于${config.file.uploadSize}M尺寸为100*100的图片`,
					showCancel: false
				});
			} else {
				let newData = [
					{
						type: 'head',
						fileUrl: res.tempFiles[0].path
					}
				];
				uploadImg(newData)
					.then(async uploadRes => {
						updateImInfos({ faceurl: uploadRes[0].src });
						await updateAvator({
							avatar: uploadRes[0].src
						});
						store.dispatch('app/init');
						baseMsgData.defaultImg = uploadRes[0].src;
						baseMsgData.formData.avatar = uploadRes[0].src;
					})
					.catch(error => {
						console.log(error, 'error');
					});
			}
		}
	});
}
//是否展示手机号
function isShowMobile() {
	if (baseMsgData.formData.isshowmobile === 1) baseMsgData.formData.isshowmobile = 2;
	else baseMsgData.formData.isshowmobile = 1;
}
//添加证书
function addCredentials() {
	if (baseMsgData.credentialsData.length === 3) {
		uni.showToast({
			icon: 'none',
			title: '最多上传三张证书'
		});
		return;
	}
	uni.chooseImage({
		count: 3,
		success(res) {
			if (baseMsgData.credentialsData.length + res.tempFiles.length > 3) {
				showModal({
					content: '超出图片选择数量，请重新选择图片',
					showCancel: false
				});
				return;
			}
			for (let i in res.tempFiles) {
				let size = +res.tempFiles[0].size / 1024 / 1024;
				if (size > config.file.uploadSize) {
					showModal({
						content: `建议上传小于${config.file.uploadSize}M尺寸为100*100的图片`,
						showCancel: false
					});
					return;
				}
			}
			let newData = res.tempFiles.map(item => {
				let obj = {
					type: 'certificate',
					fileUrl: item.path
				};
				return obj;
			});
			uploadImg(newData)
				.then(uploadRes => {
					let imgArr = uploadRes.map(item => {
						return item.src;
					});
					baseMsgData.credentialsData = [...baseMsgData.credentialsData, ...imgArr];
					baseMsgData.formData.credentials = baseMsgData.credentialsData.join(',');
				})
				.catch(error => {
					console.log(error, 'error');
				});
		}
	});
}
//删除证书
function deleteCredentials(index) {
	baseMsgData.credentialsData.splice(index, 1);
	baseMsgData.formData.credentials = baseMsgData.credentialsData.join(',');
}
function sub(e) {
	let rules = [
		{
			value: e.detail.value.avatar,
			null: '请上传形象图片',
			error: '请上传形象图片'
		},
		{
			value: e.detail.value.businessname,
			null: '请填写技能简述（2-36个字）',
			dataType: '2&36',
			error: '请填写技能简述（2-36个字）'
		},

		{
			value: e.detail.value.introduce,
			null: '请填写能力描述（10-240个字）',
			dataType: '10&240',
			error: '请填写能力描述（10-240个字）'
		}
	];
	if (!isEmpty(e.detail.value.wechat)) {
		rules.push({
			value: e.detail.value.wechat,
			dataType: '6&20',
			error: '请填写6-20位的真实可添加的微信号'
		});
	}

	const dataTypes = { dataTypes: { '2&36': /^[\w\W]{2,36}$/, '6&20': /^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/, '10&240': /^[\w\W]{10,240}$/ }, tip: 1 };

	valid(rules, dataTypes).then(res => {
		let { avatar, ...pushData } = e.detail.value;
		emits('baseMsgCallback', { subData: pushData, stepIndex: 2 });
	});
}
</script>

<style lang="scss">
@import '@/common/css/base.scss';
page {
	background-color: $bgColor;
}
</style>
<style scoped lang="scss">
@import '@/common/css/base.scss';
@import '@/common/css/form.scss';
.form {
	padding-bottom: 200rpx;
	.form-none-control {
		display: none;
	}
	.form-img {
		height: 170rpx;
		border: 0;
		.image-item {
			display: flex;
			align-items: center;
			padding: 30rpx 0;
			.avatar {
				display: inline-block;
				width: 110rpx;
				height: 110rpx;
				border-radius: 50%;
				overflow: hidden;
			}
			.icon {
				display: inline-block;
				margin-left: 22rpx;
				height: 110rpx;
				line-height: 110rpx;
				color: #aaa;
			}
		}
	}
	.upload-value {
		display: flex;
		align-items: center;
		.icon {
			margin-left: 12rpx;
			font-size: 24rpx;
		}
	}
	.from-title-no-border {
		border: 0;
	}
	.image-list {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: stretch;
		align-content: stretch;
		padding: 36rpx 0;
		.item {
			position: relative;
			display: inline-block;
			margin: 0 10rpx;
			width: 194rpx;
			height: 134rpx;
			border-radius: 6rpx;
			.image {
				display: block;
				width: 100%;
				height: 100%;
			}
			.delete-img {
				position: absolute;
				bottom: 0;
				padding: 10rpx 0;
				width: 100%;
				background: rgba(0, 0, 0, 0.5);
				.icon {
					margin: 0;
					justify-content: center;
					color: #fff;
				}
			}
		}
	}
}
</style>
